<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="项目管理">
			<view slot="right" @click="search"><u-icon name="search" size="20" color="#162233"></u-icon></view>
		</u-navbar>
		<d-select :options="options" @query="setParams"></d-select>

		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex"><view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">项目统计</view></view>
				<view class="d-flex d-m-t-30">
					<view class="d-font-30 d-flex-1" style="color: #5D6672;">项目总数量</view>
					<text class="d-font-30" style="color: #162233;">{{ _appTotal }}个</text>
				</view>
				<chart :appCount="appCount"></chart>
			</view>
			<view class="d-font-32 d-m-t-40" style="font-weight: bold;color: #323334;">项目列表</view>
			<view class="card d-p-30 d-m-t-30" v-for="(item, index) in list" :key="index" @click="appDetail(item)">
				<view class="d-flex">
					<view class="d-font-28 d-flex-1" style="color: #151C24;font-weight: bold;">{{ item.xmmc || '无数据源' }}</view>
					<!-- <view><u-button @click="appDetail(item)" text="查看" size="mini" shape="circle" :customStyle="{ color: '#FFB61D', borderColor: '#FFB61D' }"></u-button></view> -->
				</view>
				<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
					<view class="d-flex-1">
						<text>行业主管部门</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.xmtype || '无数据源' }}</text>
					</view>
					<view class="d-flex-1">
						<text>项目种类</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.tzlx || '无数据源' }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
					<view class="d-flex-1">
						<text>工程进度</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.jsjd || '无数据源' }}</text>
					</view>
					<view class="d-flex-1">
						<text>所属兵团辖区</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.districtName || '无数据源' }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
					<view class="d-flex-1">
						<text>项目经理</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.constructionxmjlname || '无数据源' }}</text>
					</view>
					<view class="d-flex-1 d-flex">
						<text>联系电话</text>
						<view class="d-m-l-20"><u--text color="#21A5F3" size="24rpx" mode="phone" call :text="item.constructionxmjllxdh || '无数据源'"></u--text></view>
					</view>
				</view>
				<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
					<view class="d-flex-1">
						<text>项目地址</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.xmdz || '无数据源' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import chart from './components/chart.vue';
import { dictList, appNation, projectCount, getProject } from '../../../common/api.js';
export default {
	components: {
		chart
	},
	data() {
		return {
			options: [
				{
					label: '属地',
					name: 'districtId',
					children: []
				},
				{
					label: '行业主管部门',
					name: 'xmtype',
					children: []
				},
				{
					label: '工程进度',
					name: 'jsjd',
					children: []
				}
			],
			queryParams: {},
			appCount: null, // 项目统计
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getData().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			let district, xmtype, jsjd;
			// 属地
			appNation()
				.then(e => {
					district = e.data.map(e => {
						return {
							id: e.districtId,
							label: e.districtName
						};
					});
				})
				.then(() => {
					// 项目类型
					return dictList({
						type: 'xmtype'
					}).then(e => {
						xmtype = e.data.map(e => {
							return {
								id: e.dictValue,
								label: e.dictLabel
							};
						});
					});
				})
				.then(() => {
					// 项目状态
					return dictList({
						type: 'jsjd'
					}).then(e => {
						jsjd = e.data.map(e => {
							return {
								id: e.dictValue,
								label: e.dictLabel
							};
						});
					});
				})
				.then(() => {
					this.options = [
						{
							label: '属地',
							name: 'districtId',
							children: district
						},
						{
							label: '行业主管部门',
							name: 'xmtype',
							children: xmtype
						},
						{
							label: '工程进度',
							name: 'jsjd',
							children: jsjd
						}
					];
				})
				.then(() => {
					this.getInfo();
				});
		},
		setParams(e) {
			this.queryParams = e;
			this.getInfo();
		},
		getInfo() {
			this.pageNum = 1;
			this.pageLast = 1;
			// 统计情况
			projectCount({
				params: {
					...this.queryParams,
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.appCount = e.data;
			});
			// 项目列表
			this.getData().then(e => {
				this.pageLast = Math.ceil(e.total / this.pageSize);
				this.list = e.data;
			});
		},
		getData() {
			return getProject({
				params: {
					...this.queryParams,
					deptId: this.$user.deptId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/app/search'
			});
		},
		appDetail(item) {
			uni.$u.route({
				url: '/pages/index/app/appDetail',
				params: {
					id: item.id
				}
			});
		}
	},
	computed: {
		_appTotal() {
			let a = 0;
			if (this.appCount) {
				for (let i in this.appCount) {
					a += Number(this.appCount[i].value);
				}
			}
			return a;
		}
	}
};
</script>

<style lang="scss">
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.sub-title {
		position: relative;
		padding-left: 20rpx;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 22rpx;
			background: #13a4fe;
			border-radius: 4rpx;
			bottom: 0;
			margin: auto;
		}
	}
}
page {
	background-color: #fbfcfc;
}
</style>
